<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid aquamarine;"></canvas>
		<script>
			window.onload=function(){
				var canvas=document.getElementById("canvas");
				var cxt=canvas.getContext("2d");
				canvas.width=500;
				canvas.height=400;
				for(var i=0;i<5;i++){
					for (var j=0;j<6;j++){
						cxt.fillStyle="rgb("+(255-30*i)+","+(255-30*j)+",200)";
						cxt.fillRect(26*i,26*j,25,25);
					}
				}
				document.onclick=function(e){
//					console.log(e.clientX+","+e.clientY);
//					console.log(e.offsetX+","+e.offsetY);
					for (var i=0;i<5;i++){
						for(var j=0;j<6;j++){
							if(e.offsetX>=25*i&&e.offsetX<=25*i+25&&e.offsetY>=25*j&&e.offsetY25<=25*j+25){
								console.log(e.offsetX+","+e.offsetY);
								console.log(i+","+j);
								cxt.strokeStyle="rgb("+(255-30*i)+","+(255-30*j)+",200)";
							}
						}
					}
				}
			}
		</script>
	</body>
</html>
